<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { baseURL, getTrainingCourseAPI } from '../apis/homeAPI.js';

const achievements = ref<any[]>([]);

const loading = ref<boolean>(true);

const coursePage = ref({
    currentPage: 1,
    total: 0,
    pageSize: 9,
    showSizePicker: true,
    pageSizes: Array.from({ length: 200 }, (_, index) => index + 1),
});

const setCourseSetsPage = (page?: number) => {
    if (page) coursePage.value.currentPage = page;
};

// 获取培训课程数据的函数
const getTrainingCourse = async () => {
  loading.value = true
  const req = {
    pageNo: coursePage.value.currentPage,
    pageSize: coursePage.value.pageSize,
  };

  const res = await getTrainingCourseAPI(req);
  const { data, meta } = res;
  achievements.value = data.map((item: any) => ({
    id: item.id,
    title: item.attributes.title,
    image: baseURL + `${item.attributes.image.data.attributes.url}`,
    date: item.attributes.time,
    location: item.attributes.Area,
    instructor: item.attributes.description,
  }));
  coursePage.value.total = meta.pagination.total
  loading.value = false
};

// 组件挂载时调用数据获取函数
onMounted(() => {
  getTrainingCourse();
  document.title = '农业外来入侵物种防控与管理平台';
});
</script>

<template>
  <div>
    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loader"></div>
    </div>

    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <a-card
        v-for="achievement in achievements"
        :key="achievement.id"
        class="bg-gray-100 rounded-lg shadow-lg p-4 hover:scale-105 transition duration-300 ease-in-out"
      >
        <router-link :to="{ name: 'TCPage', params: { id: achievement.id } }" class="block">
          <img
            :src="achievement.image"
            :alt="achievement.title"
            class="w-full h-48 object-cover rounded-md mb-4"
          />
          <h3 class="text-lg font-semibold mb-2">{{ achievement.title }}</h3>
          <p class="text-sm text-gray-600 mb-1">日期：{{ achievement.date }}</p>
          <p class="text-sm text-gray-600 mb-1">地点：{{ achievement.location }}</p>
          <p class="text-sm text-gray-600 mb-2">内容：{{ achievement.instructor }}</p>
          <span class="text-sky-400 hover:underline">了解更多</span>
        </router-link>
      </a-card>
    </div>

    <div class="mt-8 text-center">
      <a-pagination
          :current="coursePage.currentPage"
          :total="coursePage.total"
          :pageSize="coursePage.pageSize"
          @change="(page) => {
            setCourseSetsPage(page);
            getTrainingCourse();
          }"
      />
    </div>
  </div>
</template>


<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px; /* 设置高度以使加载图标居中 */
}

.loader {
  border: 8px solid rgba(255, 255, 255, 0.3); /* 背景透明的边框 */
  border-top: 8px solid #3498db; /* 顶部颜色 */
  border-radius: 50%; /* 圆形 */
  width: 50px; /* 图标宽度 */
  height: 50px; /* 图标高度 */
  animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 定义旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
